<template>
  <el-select
    class="yt-select"
    v-model="currValue"
    filterable
    v-bind="$attrs"
    :filter-method="userFilter"
    :disabled="disabled"
    multiple
    :clearable="clearable"
    @change="change"
  >
    <el-option
      v-for="option in renderOption"
      :key="option.id + 'a'"
      :value="option.id"
      :label="option.displayName"
    ></el-option>
  </el-select>
</template>

<script>
export default {
    name: 'easy-select',
    props: {
        value: {
            type: [String, Number, Array],
            default: ''
        },
        max: {
            type: Number,
            default: 30
        },
        disabled: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: true
        },
        options: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            renderOption: []
        }
    },
    computed: {
        currValue: {
            get() {
                return this.value || ''
            },
            set(value) {
                this.$emit('input', value)
            }
        }
    },
    watch: {
        value() {
            this.addValueOptions()
        },
        options: {
            handler() {
                this.init()
            },
            deep: true
        }
    },
    created() {
        this.init()
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.userFilter()
            this.addValueOptions()
        },
        addMax() {
            this.$emit('maxPlus', this.max)
        },
        addValueOptions() {
            if (this.currValue && this.currValue.length > 0) {
                let list = []
                list = this.currValue.map(
                    (item) => this.options.filter((i) => i.id == item)[0]
                )
                if (list && list.length > 0) {
                    for (let j = 0; j < list.length; j++) {
                        const element2 = list[j]
                        if (this.renderOption.every((item) => item.id !== element2.id)) {
                            this.renderOption.unshift(element2)
                            this.addMax()
                        }
                    }
                }
                this.renderOption = this.renderOption.filter((item, index) => {
                    return (
                        this.renderOption.findIndex((item1) => item1.id == item.id) == index
                    )
                })
            }
        },
        addFilterOptions(name) {
            if (this.currValue) {
                const target = this.currValue.map(
                    () => this.options.filter((i) => i.name == name)[0]
                )[0]
                if (target) {
                    // 将当前条与小option比对，没有则加入
                    if (this.renderOption.every((item) => item.id !== target.id)) {
                        this.renderOption.unshift(target)
                    }
                }
            }
        },
        userFilter(query = '') {
            const arr = this.options.filter((item) => {
                return item.name.includes(query)
            })
            if (arr.length > this.max) {
                this.renderOption = arr.slice(0, this.max)
                this.addFilterOptions(query)
            } else {
                this.renderOption = arr
            }
        },
        change(value) {
            this.$emit('change', value)
            if (!value || value !== [] || value.length > 0) {
                // 单选清空-optons初始化下
                this.userFilter()
            }
        }
    }
}
</script>
